<template>
  <view class="container" :style="{ '--line-color': color }">
    <view class="one"></view>
    <view class="two"></view>
    <view class="three"></view>
  </view>
</template>

<script lang="ts" setup>
  import type { $AllColorStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { PropType } from 'vue';
  defineOptions({
    name: 'play-animation',
  });

  defineProps({
    /** 线条颜色 */
    color: { type: String as PropType<$AllColorStr>, default: '#999999' },
  });
</script>

<style scoped lang="scss">
  @keyframes play-animation {
    0% {
      transform: scaleY(1);
    }

    50% {
      transform: scaleY(0);
    }

    100% {
      transform: scaleY(1);
    }
  }

  .container {
    --line-color: #999999;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 24px;

    .one,
    .two,
    .three {
      width: 4px;
      height: 20px;
      margin-left: 4px;
      background-color: var(--line-color);
      border-radius: 3px 3px 0 0;
      transform-origin: center bottom;
    }

    .one {
      animation: play-animation 1s infinite 0s;
    }

    .two {
      animation: play-animation 1s infinite 0.2s;
    }

    .three {
      animation: play-animation 1s infinite 0.4s;
    }
  }
</style>
